<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<!doctype html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
    <style>
      .box {
        width: 300px;
        float: left;
        margin: 0 20px 0 20px;
      }
      .box div, .box input {
        border: 1px solid;
        -moz-border-radius: 4px;
        border-radius: 4px;
        width: 100%;
        padding: 0px;
        margin: 5px;
      }
      .box div {
        border-color: grey;
        height: 300px;
        overflow: auto;
      }
      .box input {
        height: 30px;
      }
      .box span {
        margin-left: 5px;
      }
      h1 {
        margin-left: 30px;
      }
      body {
        background-color: #F0F0F0;
        font-family: "Arial";
      }
    </style>
  </head>
  <body lang="en">
    <h1>SockJS Echo Example</h1>

    <div id="first" class="box">
      <div></div>
      <span>Enter some text:</span><br/>
      <form><input autocomplete="off" value=""></input></form>
    </div>

    <script>
      var sockjs_url = "<%= request.getContextPath() %>/echo";
      var sockjs = new SockJS(sockjs_url, undefined, {debug: true});

      var div  = $('#first div');
      var inp  = $('#first input');
      var form = $('#first form');

      inp.focus();

      var print = function(m, p) {
        p = (p === undefined) ? '' : JSON.stringify(p);
        div.append($("<code>").text(m + ' ' + p));
        div.append($("<br>"));
        div.scrollTop(div.scrollTop()+10000);
      };

      sockjs.onopen    = function()  {print('[*] open', sockjs.protocol);};
      sockjs.onmessage = function(e) {print('[.] message', e.data);};
      sockjs.onclose   = function()  {print('[*] close');};

      form.submit(function() {
        print('[ ] sending', inp.val());
        sockjs.send(inp.val());
        inp.val('');
        return false;
      });
    </script>
  </body>
</html>
